<template>
    <div class="my-cascader" @mouseover="onCascaderShow" @mouseout="onCascaderShow">
        <input
            class="my-cascader-input"
            v-model="inputVal"
            readonly="readonly"
            autocomplete
            placeholder="请选择"/>
        <div :class="`my-cascader-content ${cascaderShow && 'active'}`">

        <div class="my-cascader__dropdown">
            <div class="my-cascader-panel">
                <div class="my-cascader-menu" v-for="(list, l) in listArr" :key="l">
                    <div class="my-cascader-menu__list">
                        <div
                            @click="onSelect(item, l)"
                            :class="{
                                'my-cascader-node': true,
                                'is-active': valueArr[l] && valueArr[l].value === item.value,
                            }"
                            v-for="(item, i) in list"
                            :key="i">
                            <span class="my-cascader-node__label">{{ item.label }}</span>
                            <i
                                v-if="item.children && item.children.length"
                                class="el-icon-arrow-right my-cascader-node__postfix"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="popper__arrow"></div>
        </div>

        </div>
    </div>
</template>

<script>
export default {
    components: {
    },
    props: {
        options: {
            type: Array,
            default() {
                return [];
            },
        },
        value: {},
    },
    data() {
        return {
            second: [],
            listArr: [],
            valueArr: [],
            inputVal: '',
            cascaderShow: false,
            isFoucs: false,
        };
    },
    watch: {
        value(e) {
            if (this.options && this.options.length) {
                this.listArr = [this.options];

                if (e && e.length) {
                    const index = 0;
                    this.valueRecursive(index, this.options, e[index]);
                }
            }

            if (!e || !e.length) {
                this.inputVal = '';
            }
        },
    },
    methods: {
        /**
         * 选择
         * @param {Array} e 选择的数据
         * @param {number} l 选择的数据列
         */
        onSelect(e, l) {
            this.valueArr.splice(l + 1);
            if (e.children && e.children.length) {
                this.listArr[l + 1] = {...e.children};
            } else this.listArr.splice(l + 1);

            this.listArr = [...this.listArr];
            this.valueArr[l] = e;

            this.emitChange();

            let vals = '';
            for (const item of this.valueArr) {
                vals += `${item.label} / `;
            }
            vals = vals.substr(0, vals.length - 2);
            this.inputVal = vals;
        },

        /**
         * 传值出去
         */
        emitChange() {
            const vals = [];
            for (const item of this.valueArr) {
                vals.push(item.value);
            }
            this.$emit('input', vals);
            this.$emit('change', vals);
        },

        /**
         * 清除已选值
         */
        clearSelect() {
            this.valueArr = [];
        },

        /**
         * 设置已选值
         * @param {number} i 当前第几级
         * @param {Array} current 当前要循环的数据
         * @param {string|number} target 目标条件
         * @inParams this.value 组件值，this.listArr 组件列表值
         */
        valueRecursive(i, current, target) {
            this.listArr[i] = current;
            for (const item of current) {
                if (item.value === target) {
                    this.valueArr[i] = item;
                    i++;
                    if (item.children && item.children.length) {
                        if (i <= this.value.length - 1) {
                            this.valueRecursive(i, item.children, this.value[i]);
                        } else this.listArr[i] = item.children;
                    }
                    break;
                }
            }
        },

        /**
         * 设置动画
         */
        onCascaderShow() {
            this.cascaderShow = !this.cascaderShow;
        },
    },
    mounted() {
        if (this.options && this.options.length) {
            this.listArr = [this.options];

            if (this.value && this.value.length) {
                const index = 0;
                this.valueRecursive(index, this.options, this.value[index]);
            }
        }
    },
};
</script>

<style lang="scss" scoped>
.my-cascader {
    display: inline-block;
    position: relative;

    &:hover {
        .my-cascader-input {
            border-color: #409EFF;
        }
    }
}

.my-cascader-content {
    position: absolute;
    top: 26px;
    left: 0;
    -webkit-transition: all .2s cubic-bezier(.645,.045,.355,1);
    transition: all .2s cubic-bezier(.645,.045,.355,1);
    overflow: hidden;
    z-index: 9999;
    max-height: 0;
    opacity: 0;

    &.active {
        max-height: 500px;
        opacity: 1;
    }
}

.my-cascader-input {
    -webkit-appearance: none;
    background-color: #FFF;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 28px;
    line-height: 28px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 200px;
    cursor: pointer;
}

.my-cascader__dropdown {
    margin: 5px 0;
    font-size: 14px;
    background: #FFF;
    border: 1px solid #E4E7ED;
    border-radius: 4px;
    z-index: 2;
}

.my-cascader-panel {
    display: flex;
    border-radius: 4px;
    font-size: 14px;

    .my-cascader-menu {
        max-height: 190px;
        min-width: 180px;
        box-sizing: border-box;
        color: #606266;
        overflow-y: auto;
        border-right: 1px solid #E4E7ED;

        &:last-child {
            border: none;
        }
    }

    .my-cascader-menu__list {
        position: relative;
        min-height: 100%;
        margin: 0;
        padding: 6px 0;
        list-style: none;
        box-sizing: border-box;
    }

    .my-cascader-node {
        position: relative;
        display: flex;
        align-items: center;
        padding: 0 30px 0 20px;
        height: 34px;
        line-height: 34px;
        outline: 0;
        cursor: pointer;

        &:hover {
            background: #F5F7FA;
        }

        .my-cascader-node__postfix {
            position: absolute;
            right: 10px;

            &.is-active {
                color: #409EFF;
                font-weight: 700;
            }
        }

        &.is-active {
            color: #409EFF;
            font-weight: 700;
        }
    }
}

.my-cascader-node__label {
    white-space: nowrap;

    &.is-active {
        color: #409EFF;
        font-weight: 700;
    }
}
</style>
